<template>
	<div class="news_detail_wrapper">
		<div class="head">
			<h1>{{ articleData.title }}</h1>
			<p>
				<span>作者：{{ articleData.author }}</span>
				<!-- <span>编辑：振华</span> -->
				<span>发布时间：{{ articleData.pubDate }}</span>
				<span>浏览次数：{{ articleData.clickCount }}</span>
			</p>
		</div>
		<div class="cont" v-html="articleData.content"></div>
		<div class="page">
			<template v-if="!prevNewsData">
				<span class="left el-icon-arrow-left">
					<em>上一条</em>
					<p>无</p>
				</span>
			</template>
			<template v-else>
				<router-link class="left el-icon-arrow-left" :to="{ path: `/news/${articleType}/${prevNewsData.id}` }">
					<em>上一条</em>
					<p>{{ prevNewsData.title }}</p>
				</router-link>
			</template>
			<template v-if="!nextNewsData">
				<span class="right el-icon-arrow-right">
					<em>下一条</em>
					<p>无</p>
				</span>
			</template>
			<template v-else>
				<router-link class="right el-icon-arrow-right" :to="{ path: `/news/${articleType}/${nextNewsData.id}` }">
					<em>下一条</em>
					<p>{{ nextNewsData.title }}</p>
				</router-link>
			</template>
		</div>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
import { getPrevNextNews } from '@/api/web/sysNewsContents';
export default {
	data() {
		return {
			articleData: {},
			prevNewsData: null,
			nextNewsData: null
		};
	},
	computed: {
		articleType() {
			return this.$route.params.type;
		},
		articleId() {
			return this.$route.params.id;
		}
	},
	watch: {
		articleId: {
			async handler(id) {
				let detail = await this.getArticleDetail(id).then(res => res);
				this.getPrevNextNews({ column: detail.columnIds[0], id });
				this.articleData = { ...detail };
			},
			immediate: true
		}
	},
	mounted() {},
	methods: {
		...mapActions(['getNewsDetail']),
		//获取文章详情
		async getArticleDetail(id) {
			return this.getNewsDetail(id).then(res => res);
		},

		//获取前后篇文章
		async getPrevNextNews(data) {
			let result = await getPrevNextNews(data).then(res => res.data);
			if (result.code === '0') {
				let datas = !result.data ? {} : { ...result.data[0] };
				this.prevNewsData = !datas.next ? null : { ...datas.next };
				this.nextNewsData = !datas.pre ? null : { ...datas.pre };
				console.log(this.prevNewsData, this.nextNewsData);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.news_detail_wrapper {
	padding-bottom: 64px;
	.head {
		text-align: center;
		h1 {
			font-size: 24px;
			line-height: 1.5;
		}
		p {
			padding: 10px 0;
			margin-top: 10px;
			color: rgba(0, 0, 0, 0.4);
			span {
				margin: 0 20px;
			}
		}
	}
	.cont {
		font-size: 18px;
		padding: 20px 0;
		color: #666;
		line-height: 2;
		p {
			margin-bottom: 2em;
		}
		img {
			display: block;
			max-width: 100%;
		}
	}
	.page {
		display: flex;
		justify-content: space-between;
		height: 72px;
		border-radius: 6px;
		background-color: #f3f3f3;
		a,
		span {
			position: relative;
			max-width: 49%;
			padding: 14px;
			flex-shrink: 0;
			font-size: 14px;
			line-height: 22px;
			text-decoration: none;
			box-sizing: border-box;
			color: #666;
			&::before {
				position: absolute;
				top: 14px;
				width: 40px;
				height: 40px;
				font-size: 36px;
				line-height: 40px;
				text-align: center;
				color: #999;
				border: solid 2px #999;
				border-radius: 50%;
			}
			&.left {
				text-align: left;
				padding-left: 64px;
				&::before {
					left: 14px;
				}
			}
			&.right {
				text-align: right;
				padding-right: 64px;
				&::before {
					right: 14px;
				}
			}
			em {
				display: block;
				font-style: normal;
			}
			p {
				height: 22px;
				overflow: hidden;
			}
		}
		a:hover {
			color: #357c65;
			font-weight: bold;
			&::before {
				color: #357c65;
				border-color: #357c65;
			}
		}
	}
}
</style>
